<template>
    <view class="content">
        <view class="row b-b">
            <text class="tit">手机号:</text>
            <input class="input" type="text" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">验证码:</text>
            <input class="input" type="text" v-model="code" placeholder="请输入验证码" placeholder-class="placeholder" />
			<button class="code" @click="getVerificationCode" :disabled="disabled">{{ codeMsg }}</button>
        </view>
        <view class="row b-b">
            <text class="tit">密码:</text>
            <input class="input" type="password" v-model="password" placeholder="请输入新密码(6-20位英文或数字）" placeholder-class="placeholder" />
        </view>
		
        <button class="add-btn" @click="confirm">登录</button>
    </view>
</template>

<script>
  import md5 from '../../api/md5.js'
      export default {
          data() {
              return {
                      phone: '',
                      code: '',
                      password: '',
                     codeMsg: '获取验证码',
					   disabled:false,
					   type:Number
              
              }
          },
          onLoad(option) {
			  this.type = option.type
		  },
          methods: {
  			//验证手机号
  			validePhoneNumber() {
  				var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  				if (this.phone == null || this.phone == '') {
  					uni.showToast({
  						title: '手机号码不能为空',
  						icon: 'none',
  						duration: 2000
  					});
  					return false;
  				} else if (!myreg.test(this.phone)) {
  					uni.showToast({
  						title: '手机号格式错误',
  						icon: 'none',
  						duration: 2000
  					});
  					return false;
  				}
  			},
  			//验证验证码
  			getVerificationCode() {
  				var flag = this.validePhoneNumber();
  				if (flag != false) {
  					let count = 60;
  					this.codeMsg = count + 's';
  					let timer = setInterval(() => {
  						if (count <= 1) {
  							clearInterval(timer);
  							this.codeMsg = '获取验证码';
  							this.disabled = false;
  						} else {
  							count--;
  							this.codeMsg = count + 's';
  							//获取验证码
  							this.disabled = true;
  						}
  					}, 1000);
  					this.$http.get('/sms/getSmsCode', { phone: this.phone, type: 3 }).then(res => {
  						console.log(res);
  						if (res.code == '0') {
  							uni.showToast({
  								title: '验证码已发送',
  								icon: 'success'
  							});
  						} else {
  							uni.showToast({
  								title: res.msg,
  								icon: 'none'
  							});
  						}
  					});
  				}
  			},
              //提交
              confirm() {
                  
                 if (this.password == null || this.password == '') {
                  	uni.showToast({
                  		title: '新密码不能为空',
                  		icon: 'none',
                  		duration: 2000
                  	});
                  	return false;
                  }else{
  					var flag = this.validePhoneNumber();
  					if(flag!=false){
  						if (this.code == null || this.code == '') {
  						 	uni.showToast({
  						 		title: '验证码不能为空',
  						 		icon: 'none',
  						 		duration: 2000
  						 	});
  						 	return false;
  						 }else{
  							 //调接口
  							 this.updatePwd();
  						 }
  					}
                  	
                  }
  
              },
  			//更改支付密码 type :2  修改登录密码 type 1
  			updatePwd(){
  				let that = this;
  				let Password = md5(this.password)
  				that.$http.post('/user/updatePwd', { phone: this.phone, type:that.type,password:Password,code:this.code }).then(res => {
  					if (res.code == '0') {
  						console.log(res.data)
  						if (res.data != '') {
  							uni.showToast({
  								title: res.msg,
  								icon: 'none'
  							});
  							setTimeout(()=>{
  								uni.navigateBack({
  									delta:1
  								})
  							},1500)
  						}
  					} else {
  						uni.showToast({
  							title: res.msg,
  							icon: 'none'
  						});
  					}
  				});
  			}
          }
      }
  </script>
  

<style lang="scss">
	
    page {
        padding-top: 16upx;
		background-color: #fff;
    }

    .row {
        display: flex;
        align-items: center;
        position: relative;
        margin: 0 30upx;
        height: 110upx;
        background: #fff;
		border-bottom: 1upx solid rgba(238,238,238,1);
        .tit {
            flex-shrink: 0;
            width: 120upx;
            font-size: 30upx;

        }
		.code{
			width: 140upx;
			height: 48upx;
			background: rgba(253, 88, 10, 1);
			border-radius: 8upx;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 48upx;
			padding: 0;
		}
        .input {
            flex: 1;
            font-size: 30upx;

        }

        .icon-shouhuodizhi {
            font-size: 36upx;

        }
    }

    .add-btn {
        width:600upx;
        height:88upx;
        background:rgba(255,117,23,1);
        border-radius:8upx;
		font-size: 34upx;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 160upx;
    }
</style>
